<template>
	<Container>
		<view class="header">
			<view class="article" v-if="!isStart && articleIsShow"><image class="img" :src="assignment.optionArticles[current].imageUrl" mode="aspectFit"></image></view>
			<view class="article" v-if="isStart">
				<view class="option" v-for="(item, index) in assignment.optionArticleNames" :key="index" hover-class="touch" hover-stay-time="100">
					<image class="image img" :src="article(item).imageUrl" mode="aspectFit"></image>
					<view class="icon">{{ index + 1 }}</view>
				</view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="guide" />
		<Record ref="audio" @recordFinish="recordFinish" :isStart="!isStart || questionPress" :answerText="assignment.optionArticleNames" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	data() {
		return {
			current: 0,
			isStart: false,
			articleIsShow: true,
			timer: null
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Record },
	computed: {
		guide() {
			return this.isStart ? this.assignment.questionName : this.assignment.optionArticles[this.current].questionName
		},
		article(item) {
			return function(item) {
				return this.assignment.optionArticles.filter(articles => {
					return articles.name === item
				})[0]
			}
		}
	},
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	methods: {
		questionPlay: async function() {
			clearTimeout(this.timer)
			const data = await this.parseTextAudio({
				text: this.guide,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
					this.timer = setTimeout(async () => {
						if (this.isStart) return
						if (this.current === this.assignment.optionArticles.length - 1) {
							this.articleIsShow = false
							this.isStart = true
							this.questionPlay()
							return
						}
						this.current++
						this.articleIsShow = false
						setTimeout(() => {
							this.articleIsShow = true
						}, 0)
						this.questionPlay()
					}, 2500)
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	position relative
	.article
		width 100%
		height 100%
		display flex
		align-items center
		justify-content center
		flex-wrap wrap
		animation outIn 0.4s
		image
			width 75%
			height 75%
		.option
			width 45%
			height 40%
			display flex
			align-items center
			justify-content center
			transition all 0.3s
			position relative
			border 8rpx solid #F9DAA9
			box-sizing border-box
			border-radius 40rpx
			margin 2.5%
			.image
				width 90%
				height 90%
			.icon
				position absolute
				width 50rpx
				height 50rpx
				z-index 99
				background #EE7B58
				display flex
				align-items center
				justify-content center
				font-size 30rpx
				color white
				text-shadow 1rpx 1rpx 2rpx #3F536E
				border-radius 50%
		.option:nth-child(1) .icon
			right -15rpx
			bottom -15rpx
		.option:nth-child(2) .icon
			left -15rpx
			bottom -15rpx
		.option:nth-child(3) .icon
			right -15rpx
			top -15rpx
		.option:nth-child(4) .icon
			left -15rpx
			top -15rpx
</style>
